<!-- @format -->

<script setup>
	import BitPanel from './components/bit-panel.vue'
</script>

<template>
	<h3>折叠面板</h3>
	<!-- 第一次使用：没有传递内容，就会展示插槽的默认值 -->
	<bit-panel />
	<bit-panel></bit-panel>

	<!-- 第二次使用：传递内容，展示两张图片 -->
	<bit-panel>
		<div class="img-box">
			<img
				src="./assets/lq.png"
				alt="lq" />
			<img
				src="./assets/sy.png"
				alt="sy" />
		</div>
	</bit-panel>
</template>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}
	body {
		background: #ccc;
	}
	#app {
		width: 400px;
		margin: 30px auto;
		padding: 1em 2em 2em;
		background: #fff;
	}
	#app h3 {
		margin-bottom: 20px;
		text-align: center;
	}

	.img-box {
		display: flex;
		flex-direction: column;
		img {
			width: 100%;
		}
	}
</style>
